@use "styles/Radius.module.scss";
@use "styles/ScreenSizes.module.scss";
@use "styles/Spacings.module.scss";
@use "styles/Transitions.module.scss";
@use "styles/Typography.module.scss";

.message_row_container {
  display: flex;
  flex-direction: column;
  gap: Spacings.$spacing03;
  border-bottom: 1px solid var(--border-0);
  padding-bottom: Spacings.$spacing01;
  position: relative;

  &.user {
    font-size: Typography.$very_large;
    font-weight: 500;
    border-bottom: none;
    border-radius: Radius.$normal;

    p {
      display: -webkit-box;
      -webkit-line-clamp: 1000;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;

      &:hover {
        cursor: pointer;
      }
    }
  }

  &.last {
    border-bottom: none;
  }

  &.smaller {
    font-size: Typography.$large;
  }

  &.folded {
    &.user {
      p {
        -webkit-line-clamp: 6;
      }
    }
  }

  @media screen and (max-width: ScreenSizes.$small) {
    &.user {
      font-size: Typography.$large;
    }
  }

  .icon_rotate {
    position: absolute;
    right: Spacings.$spacing04;
    top: -(Spacings.$spacing05);
    transition: transform 0.3s Transitions.$easeOutBack;
  }

  .icon_rotate_down {
    transform: rotate(0deg);
  }

  .icon_rotate_up {
    transform: rotate(-180deg);
  }

  .message_row_content {
    border-radius: Radius.$big;
    width: fit-content;
    padding-block: Spacings.$spacing03;
  }

  .message_header_wrapper {
    overflow: hidden;
  }

  &.brain {
    .message_header {
      display: flex;
      gap: Spacings.$spacing04;
      align-items: baseline;
      @include Typography.H2;
    }

    .message_row_content {
      align-self: flex-start;
      position: relative;
      padding: 0;
    }

    .metadata_wrapper {
      display: flex;
      flex-direction: column;
      left: Spacings.$spacing02;
      top: calc(100% + #{Spacings.$spacing03});
      gap: Spacings.$spacing03;

      .sources_and_citations_wrapper {
        display: flex;
        flex-direction: column;
        gap: Spacings.$spacing03;
        max-width: 100%;
        padding-bottom: Spacings.$spacing05;

        .title_wrapper {
          display: flex;
          align-items: center;
          gap: Spacings.$spacing03;

          .title {
            @include Typography.H2;
          }
        }

        .sources {
          display: flex;
          column-gap: Spacings.$spacing06;
          row-gap: Spacings.$spacing03;
          flex-wrap: wrap;
          max-width: 100%;
        }
      }

      .icons_wrapper {
        display: flex;
        gap: Spacings.$spacing04;
        padding-top: Spacings.$spacing03;
        padding-bottom: Spacings.$spacing05;
        width: 100%;
        justify-content: flex-end;

        .with_border {
          border-bottom: 1px solid var(--border-0);
        }
      }
    }

    .related_questions_wrapper {
      display: flex;
      flex-direction: column;
      gap: Spacings.$spacing03;
      padding-block: Spacings.$spacing03;

      .title_wrapper {
        display: flex;
        align-items: center;
        gap: Spacings.$spacing03;

        .title {
          @include Typography.H2;
        }
      }

      .questions_wrapper {
        display: flex;
        flex-direction: column;
        gap: Spacings.$spacing02;
        font-size: Typography.$small;

        .question {
          display: flex;
          align-items: center;
          gap: Spacings.$spacing03;

          .text {
            color: var(--text-4);
            transition: color 0.5s ease;

            &:hover {
              color: var(--text-3);
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
